<template>
	<view class="content new-repair">
		<u-form :model="form" ref="uForm" labelPosition="top">
			<u-form-item label="问题描述" prop="message">
				<tai-card padding="12rpx 32rpx" :shadow="false" radius="10rpx">
					<u-input v-model="form.message" type="textarea" :border="false" :height="200" :auto-height="true" />
				</tai-card>
			</u-form-item>
			<u-form-item label="期望维修时间" prop="date">
				<tai-card padding="12rpx 32rpx" :shadow="false" radius="10rpx">
					<view class="flex-between" @click="() => showTime = true">
						<view class="">
							{{ appointment }}
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</tai-card>
			</u-form-item>
			<u-form-item label="报修图片" prop="date">
				<u-upload :action="action" :file-list="fileList" max-count="1" :multiple="false" @on-choose-complete="chooseComplete"></u-upload>
			</u-form-item>
		</u-form>
		<u-button type="primary" size="medium" style="width: 100%"
			:customStyle="{'width': '100%', 'margin-top': '40rpx'}" :disabled="!showSumbit">
			保存
		</u-button>
		<u-select v-model="showTime" mode="mutil-column" :list="list" @confirm="timeConfirm"></u-select>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import TaiCard from '@/components/tai-card/index.vue'
	export default {
		components: { TaiCard },
		data() {
			return {
				type: '',
				showTime: false,
				form: {
					message: '',
					date: '',
					time: ''
				},
				dateDict: {},
				list: [],
				fileList: []
			}
		},
		computed: {
			appointment() {
				if (this.form.date && this.form.time) {
					return `${this.dateDict[this.form.date]}${this.form.time}`
				}
				return '请选择'
			},
			showSumbit() {
				return this.form.date && this.form.time && this.form.message
			}
		},
		methods: {
			initTime() {
				// 时间列表
				let times = []
				for (let i = 0; i < 24; i+=2) {
					let startTime = i < 10 ? `0${i}:00` : `${i}:00`
					let endTime = i + 2 < 10 ? `0${i + 2}:00` : `${i + 2}:00`
					times.push({
						label: startTime + '~' + endTime,
						value: startTime + '~' + endTime
					})
				}
				
				// 获取当前到下个月末的日期
				const today = dayjs();
				// 获取下个月的最后一天
				const lastDayOfNextMonth = today.add(1, 'month').endOf('month');
				// 创建一个数组来存储日期
				let dates = [];
				let diff = lastDayOfNextMonth.diff(today, 'day')
				let params = {
					0: '今天',
					1: '明天',
					2: '后天'
				}
				for (let i = 0; i <= diff; i++) {
					let dateObj = {
						label: i <=2 ? params[i] + today.add(i, 'day').format('MM月DD日') : today.add(i, 'day').format('MM月DD日'),
						value: today.add(i, 'day').format('YYYY-MM-DD')
					}
					this.dateDict[dateObj.value] = dateObj.label
					dates.push(dateObj)
				}
				this.list = [dates, times]
			},
			timeConfirm(value) {
				this.form.date = value[0].value
				this.form.time = value[1].value
			},
			// 每次选择图片后触发
			chooseComplete(lists, name) {
				console.log(lists, name);
			}
		},
		onLoad(options) {
			this.type = options.type
		},
		mounted() {
			this.initTime()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 32rpx;
		.flex-between {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		/deep/ .u-size-medium {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
		}
		/deep/ .u-list-item {
			background-color: #FFF;
		}
	}
</style>